<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->
<style>
    .image-upload {
        display: inline-block;
        width: 100px !important;
        height: 100px;
        cursor: pointer;
        border: 1px dotted #ccc;
        background-size: 100% 100%;
        background-image: url(/static/image/upload.png);
        margin-right: 10px;
    }
    .image-upload button,.identity-z button,.identity-f button {
        width: 100px;
        height: 100px;
        position: relative;
        top: 0px;
        opacity: 1;
        cursor: pointer;
    }
    .x-admin-sm .image-upload .layui-btn:hover{
        opacity: 0;
    }
    .form-container {
        display: flex;
    }
    .form-left {
        width: 28%;
    }
    .form-right {
        width: 72%;
    }
    #LAY_layedit_1 img {
        width: 100px !important;
    }
    .goods_img_ele {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        display: inline-block;
        background-color: rebeccapurple;
    }
    .goods_img {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
    .delete {
        position: absolute;
        top: 0;
        width: 100px;
        height: 100px;
        /*opacity: 0.8;*/
        background:url(/static/image/delete.png) no-repeat center;
        background-size: 35% 35%;
        /*background-color: #0000000;*/
    }
    .layui-border-box, .layui-border-box {
        display: flex;
    }
    .layui-transfer-active {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .layui-transfer-data {
        height: 80%;
        overflow-y: scroll;
        overflow-x: scroll;
    }

    .list-left {
        width: 335px;
        height: 535px;
        overflow-y: scroll;
    }
    .list-right {
        width: 335px;
        height: 535px;
        overflow-y: scroll;
    }
    .btn-conta {
        width: 30px;
        height: 535px;
        margin: 0 5px;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    .btn-left {
        width: 100%;
        height: 30px;
        background-color: #009688;
        text-align: center;
        line-height:30px;
        margin-top: 10px;
        color: #ffffff;
    }
    .btn-right{
        width: 100%;
        height: 30px;
        background-color: #009688;
        text-align: center;
        line-height:30px;
        margin-bottom: 10px;
        color: #ffffff;
    }
    td {
        min-width: 50px;
        max-width: 80px;
    }
</style>
@section('content')
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="form-container">
                    <div class="form-left">
                        <div class="layui-form-item">
                            <label for="cate_id" class="layui-form-label"><span class="x-red">*</span>分类</label>
                            <div class="layui-input-inline">
                                <select id="cate_id" name="cate_id" class="valid">
                                    @foreach($list as $item)
                                        <option value="{{$item['id']}}">{{$item['cate_name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_sn" class="layui-form-label">
                                <span class="x-red">*</span>编号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="goods_sn" name="goods_sn" required="" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_name" class="layui-form-label">
                                <span class="x-red">*</span>名称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="goods_name" name="goods_name" required="" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="x-red">*</span>类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="goods_type" value="1" title="普通">
                                <input type="radio" name="goods_type" value="2" title="精品" checked>
                                <input type="radio" name="goods_type" value="3" title="特选" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="x-red">*</span>固定价格</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="fixed_price" lay-skin="switch" lay-text="是|否" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="x-red">*</span>促销</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="promotion" lay-skin="switch" lay-text="是|否" checked disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="x-red">*</span>上架</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="status" lay-skin="switch" lay-text="是|否" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_price" class="layui-form-label">
                                <span class="x-red">*</span>价格</label>
                            <div class="layui-input-inline">
                                <input type="number" id="goods_price" name="goods_price" required="" autocomplete="off" class="layui-input" value="0.00" step="0.01" min="0">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="mini_quantity" class="layui-form-label">
                                <span class="x-red">*</span>起订量</label>
                            <div class="layui-input-inline">
                                <input type="text" id="mini_quantity" name="mini_quantity" required="" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_specification" class="layui-form-label">
                                <span class="x-red">*</span>规格</label>
                            <div class="layui-input-inline">
                                <input type="text" id="goods_specification" name="goods_specification" required="" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_unit" class="layui-form-label">
                                <span class="x-red">*</span>单位</label>
                            <div class="layui-input-inline">
                                <input type="text" id="goods_unit" name="goods_unit" required="" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_weight_j" class="layui-form-label">
                                <span class="x-red">*</span>净重</label>
                            <div class="layui-input-inline">
                                <input type="text" id="goods_weight_j" name="goods_weight_j" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{ number_format(0, 3, '.', '') }}" step="0.001" oninput="checkWeight(this)">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_weight_m" class="layui-form-label">
                                <span class="x-red">*</span>毛重</label>
                            <div class="layui-input-inline">
                                <input type="text" id="goods_weight_m" name="goods_weight_m" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{ number_format(0, 3, '.', '') }}" step="0.001" oninput="checkWeight(this)">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="goods_img" class="layui-form-label">
                                <span class="x-red">*</span>图片</label>
                            <div class="layui-input-inline upload" style="display: flex;">
                                <div class="image-upload identity-z">
                                    <button type="button" class="layui-btn" id="goods_img" style="width: 100px;height: 100px;top: 0;opacity: 0">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                </div>
                                <input type="hidden" name="goods_img" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <input type="hidden" name="is_group" class="layui-input" value="1">
                            <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                        </div>
                    </div>
                    <div class="form-right">
                        <div class="layui-form-item">
                            <label for="goods_unit" class="layui-form-label"></label>
                            <div style="display: flex;">
                                <div style="width: 335px;">商品列表：</div>
                                <div style="width: 40px;"></div>
                                <div style="width: 335px;">组合商品：</div>
                            </div>
                            <div class="layui-input-inline" style="width: 710px;display: flex;margin-top: 10px">
                                <div class="list-left">
                                    <table class="layui-table" lay-skin="line" style="table-layout:fixed">
                                        <colgroup>
                                            <col width="10">
                                            <col width="45">
                                            <col width="22">
                                            <col width="23">
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" lay-filter="checkall-left" name="" lay-skin="primary">
                                            </th>
                                            <th>名称</th>
                                            <th>价格</th>
                                            <th>库存</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($goods as $item)
                                            <tr>
                                                <td>
                                                    <input type="checkbox" name="goods" value="{{$item['id']}}" lay-skin="primary">
                                                </td>
                                                <td>{{$item['goods_name']}}</td>
                                                <td>{{$item['goods_price']}}</td>
                                                <td>{{$item['goods_sale_num']}}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="btn-conta">
                                    <div class="btn-right"> > </div>
                                    <div class="btn-left"> < </div>
                                </div>
                                <div class="list-right">
                                    <table class="layui-table" lay-skin="line" style="table-layout:fixed">
                                        <colgroup>
                                            <col width="10">
                                            <col width="45">
                                            <col width="22">
                                            <col width="23">
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" lay-filter="checkall-right" name="" lay-skin="primary">
                                            </th>
                                            <th>名称</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                选够组合中的
                                <input type="text" id="mini_quantity" name="send_require" required="" lay-verify="required" autocomplete="off" class="layui-input" style="width: 100px;display: inline-block">
                                件，赠送组合中商品
                                <input type="text" id="mini_quantity" name="send" required="" lay-verify="required" autocomplete="off" class="layui-input" style="width: 100px;display: inline-block">
                                件
                            </div>
                        </div>
                        {{--<div class="layui-form-item">
                            <label class="layui-form-label"><span class="x-red">*</span>详情</label>
                            <div class="layui-input-block">
                                <textarea id="goods_detail" name="goods_detail" style="display: none;"></textarea>
                            </div>
                        </div>--}}
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                // 监听全选
                form.on('checkbox(checkall-left)', function(data){
                    if(data.elem.checked){
                        $('.list-left tbody input').prop('checked',true);
                    }else{
                        $('.list-left tbody input').prop('checked',false);
                    }
                    form.render('checkbox');
                });

                // 监听全选
                form.on('checkbox(checkall-right)', function(data){
                    if(data.elem.checked){
                        $('.list-right tbody input').prop('checked',true);
                    }else{
                        $('.list-right tbody input').prop('checked',false);
                    }
                    form.render('checkbox');
                });

                // ready获取事件
                list = [];
                left_ids = [];
                right_ids = [];
                left_value = [];
                right_value = [];
                $(document).ready(function() {
                    $.ajax({
                        type: 'POST',
                        url: '/admin/goods/goodsList/ajax',
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data) {
                            list = data.data.list;
                            list.forEach(function(val){
                                left_ids.push(val.id);
                            });
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!')
                        }
                    });
                });

                $(".btn-right").click(function () {
                    $(".list-left tbody input:checkbox[name='goods']:checked").each(function() {
                        id = parseInt($(this).val());
                        right_ids.push(id);
                        local = $.inArray(id, left_ids);     // 根据元素值查找下标，不存在返回-1
                        left_ids.splice(local,1);            // 根据下标删除一个元素   1表示删除一个元素
                    });

                    left_ids.sort(function(a,b){
                        return b-a;
                    });
                    right_ids.sort(function(a,b){
                        return b-a;
                    });

                    right_value = [];
                    right_ids.forEach(function(r) {
                        list.forEach(function(l){
                            if (l.id == r) {
                                right_value.push(l);
                            }
                        });
                    });

                    left_value = [];
                    left_ids.forEach(function(le) {
                        list.forEach(function(li){
                            if (li.id == le) {
                                left_value.push(li);
                            }
                        });
                    });

                    right_html = '<tbody>';
                    right_value.forEach(function(rig) {
                        right_html = right_html + '<tr>' +
                            '<td>' +
                            '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                            '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                            '</td>' +
                            '<td>' + rig.goods_name + '</td>' +
                            '<td>' + rig.goods_price + '</td>' +
                            '<td><input type="text" name="right-number" id="' + rig.id + '" style="width: 30px" value="1"></td></tr>';
                    });
                    right_html = right_html + '</tbody>';
                    $(".list-right tbody").remove();
                    $(".list-right thead").after(right_html);

                    left_html = '<tbody>';
                    left_value.forEach(function(rig) {
                        left_html = left_html + '<tr>' +
                            '<td>' +
                            '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                            '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                            '</td>' +
                            '<td>' + rig.goods_name + '</td>' +
                            '<td>' + rig.goods_price + '</td>' +
                            '<td>' + rig.goods_sale_num + '</td></tr>';
                    });
                    left_html = left_html + '</tbody>';
                    $(".list-left tbody").remove();
                    $(".list-left thead").after(left_html);

                    form.render();
                });

                $(".btn-left").click(function () {
                    $(".list-right tbody input:checkbox[name='goods']:checked").each(function(){
                        id = parseInt($(this).val());
                        left_ids.push(id);
                        local = $.inArray(id, right_ids);     // 根据元素值查找下标，不存在返回-1
                        right_ids.splice(local,1);            // 根据下标删除一个元素   1表示删除一个元素
                    });

                    left_ids.sort(function(a,b){
                        return b-a;
                    });
                    right_ids.sort(function(a,b){
                        return b-a;;
                    });

                    right_value = [];
                    right_ids.forEach(function(r) {
                        list.forEach(function(l){
                            if (l.id == r) {
                                right_value.push(l);
                            }
                        });
                    });

                    left_value = [];
                    left_ids.forEach(function(le) {
                        list.forEach(function(li){
                            if (li.id == le) {
                                left_value.push(li);
                            }
                        });
                    });

                    right_html = '<tbody>';
                    right_value.forEach(function(rig) {
                        right_html = right_html + '<tr>' +
                            '<td>' +
                            '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                            '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                            '</td>' +
                            '<td>' + rig.goods_name + '</td>' +
                            '<td>' + rig.goods_price + '</td>' +
                            '<td><input type="text" name="right-number" id="' + rig.id + '" style="width: 30px" value="1"></td></tr>';
                    });
                    right_html = right_html + '</tbody>';
                    $(".list-right tbody").remove();
                    $(".list-right thead").after(right_html);

                    left_html = '<tbody>';
                    left_value.forEach(function(rig) {
                        left_html = left_html + '<tr>' +
                            '<td>' +
                            '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                            '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                            '</td>' +
                            '<td>' + rig.goods_name + '</td>' +
                            '<td>' + rig.goods_price + '</td>' +
                            '<td>' + rig.goods_sale_num + '</td></tr>';
                    });
                    left_html = left_html + '</tbody>';
                    $(".list-left tbody").remove();
                    $(".list-left thead").after(left_html);

                    form.render();
                });

                // 上传分类图片
                layui.use('upload', function(){
                    var upload = layui.upload;
                    var uploadInst = upload.render({
                        elem: '#goods_img',  // 绑定元素
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        url: '/admin/index/imageUpload', // 上传接口
                        done: function(res){
                            //上传完毕回调
                            var html = '<div class="goods_img_ele">';
                            var img  = '<img class="goods_img" src="' +  res.data.image + '"/>';
                            html = html + img + '<div class="delete"></div></div>';
                            $(".image-upload").before(html);
                        },
                        error: function(){
                            //请求异常回调
                        }
                    });
                });

                // 点击删除图标
                $(".upload").on('click','.delete',function () {
                    var that = this;
                    layer.confirm('确定要删除吗？', {icon: 3, title:'提示'}, function(index){
                        $(that).parent().remove();
                        layer.close(index);
                    });
                });

                //监听提交
                form.on('submit(add)',
                    function(data) {
                        var content = '';
                        $(".goods_img").each(function(index){
                            var src = $(this)[0].src;
                            if(index == 0){
                                content = content + src;
                            }else{
                                content = content + ',' + src;
                            }
                        });
                        data.field.goods_img = content;

                        goods_group = [];
                        $(".list-right input[name='right-number']").each(function(){
                            person = {};
                            person.id = $(this)[0].id;
                            person.number = $(this).val()
                            goods_group.push(person);
                        });
                        data.field.goods_group = goods_group;

                        data.field.goods_price = parseFloat(data.field.goods_price || 0).toFixed(2);

                        if (data.field.goods_img == '') {
                            layer.msg('请上传商品图片',{icon:7,time:2000});
                            return false;
                        }
                        if (data.field.goods_group == []) {
                            layer.msg('请选择商品',{icon:7,time:2000});
                            return false;
                        }
                        /*if (data.field.goods_detail == '') {
                            layer.msg('请上传商品详情',{icon:7,time:2000});
                            return false;
                        }*/
                        $.ajax({
                            type: 'POST',
                            url: '/admin/goods/goodsAdd',
                            data: data.field,
                            dataType: 'json',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                            },
                            success: function (data) {
                                if (data.code == 1) {
                                    layer.alert("添加成功", {
                                            icon: 6,
                                            closeBtn: false
                                        },
                                        function() {
                                            //关闭当前frame
                                            xadmin.close();
                                            // 可以对父窗口进行刷新
                                            xadmin.father_reload();
                                        });
                                } else {
                                    layer.alert(data.msg)
                                }
                            },
                            error: function (xhr, type) {
                                alert('Ajax error!')
                            }
                        });
                        return false;
                    });
            });

        function checkInteger(input) {
            input.value = input.value.replace(/[^\d]/g, '');
        }

        function checkWeight(input) {
            input.value = input.value.replace(/[^\d.]/g, '');
        }
    </script>

@endsection
